<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#00CBCB" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="changeStatus" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="scrollLower">
						<view class="container">
							<!-- <view class="coupon-title">
								<text>平台优惠券</text>
							</view>
							<view class="coupon-border">
								<view class="coupon-info">
								<view class="coupon-price">
									<text class="t2"><text class="t1">￥</text>20</text>
									<text class="t3">满1200元可用</text>
								</view>
								<view class="coupon-describe">
									<text class="t1">医药健康专享券</text>
									<text class="t2">2021.3.31前有效</text>
								</view>
								<view class="coupon-employ">
									<text class="t1">剩一天</text>
									<text class="t2">去使用</text>
								</view>
								</view>
							</view>
							<view class="coupon-border">
								<view class="coupon-info">
								<view class="coupon-price">
									<text class="t2"><text class="t1">￥</text>20</text>
									<text class="t3">满1200元可用</text>
								</view>
								<view class="coupon-describe">
									<text class="t1">医药健康专享券</text>
									<text class="t2">2021.3.31前有效</text>
								</view>
								<view class="coupon-employ">
									<text class="t1">剩一天</text>
									<text class="t2">去使用</text>
								</view>
								</view>
							</view> -->
							<view class="coupon-title">
								<text>店铺券</text>
							</view>
							<!-- <view class="coupon-border" v-for="(item,i) in memberCouponList.records" :key="i"> -->
							<view  class="coupon-item" v-for="(item,i) in memberCouponList.records" :key="i">
								<coupon  :coupon="item" :type="4"/>
								<!-- <view class="coupon-info">
								<view class="coupon-price">
									<text class="t2"><text class="t1">{{coupon.ruleType == 0 ? '￥':'折'}}</text>20</text>
									<text class="t3">满1200元可用</text>
								</view>
								<view class="coupon-describe">
									<text class="t1">医药健康专享券</text>
									<text class="t2">2021.3.31前有效</text>
								</view>
								<view class="coupon-employ">
									<text class="t1">剩一天</text>
									<text class="t2">去使用</text>
								</view>
								</view> -->
							</view>
							<u-loadmore :status="memberCouponLoadingStatus" margin-top="30"/>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="scrollLower">
					<view class="container">
							<view class="coupon-item coupon-item-dis" v-for="(item,i) in memberCouponList.records" :key="i">
							<!-- <view class="coupon-border coupon-border-left" v-for="(item,i) in memberCouponList.records" :key="i"> -->
								<coupon  :coupon="item" :type="4"/>
								<!-- <view class="coupon-info">
									<view class="coupon-price">
										<text class="t2"><text class="t1">￥</text>20</text>
										<text class="t3">满1200元可用</text>
									</view>
									<view class="coupon-describe">
										<text class="t1">医药健康专享券</text>
										<text class="t2">2021.3.31前有效</text>
									</view>
									<view class="coupon-employ">
										<text class="t1">剩一天</text>
										<text class="t2">去使用</text>
									</view>
								</view> -->
							</view>
							
							<u-loadmore :status="memberCouponLoadingStatus" margin-top="30"/>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import coupon from '@/components/cart/coupon.vue'
export default {
	components:{coupon},
	data() {
		return {
			orderList: [[], []],
			list: [
				{
					name: '未使用'
				},
				{
					name: '已失效'
				},
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore','loadmore'],
			condition:{
				storeId:uni.getStorageSync('storeId'),
				current:1,
				size:20,
				isUse:0
			},
		};
	},
	onLoad() {
		// this.getOrderList(0);
		// this.getOrderList(1);
		// this.getOrderList(3);
		this.getMyCouponList()
	},
	computed:{
		...mapState({
			memberCouponList: state => state.person.memberCouponList,
			memberCouponLoadingStatus: state => state.person.memberCouponLoadingStatus
		})
	},
	// computed: {
		// 价格小数
		// priceDecimal() {
		// 	return val => {
		// 		if (val !== parseInt(val)) return val.slice(-2);
		// 		else return '00';
		// 	};
		// },
		// 价格整数
		// priceInt() {
		// 	return val => {
		// 		if (val !== parseInt(val)) return val.split('.')[0];
		// 		else return val;
		// 	};
		// }
	// },
	onReachBottom(){
		console.log('滚动到底部了')
		// if (this.loadingStatus==='loadmore'&&this.condition.current<this.storeUnbindList.pages) {
		// 	this.condition.current = this.condition.current + 1
		// 	this.getStoreUnBindList()
		// }
	},
	methods: {
		...mapActions(['ActGetMyCouponList']),
		async getMyCouponList(){
			await this.ActGetMyCouponList(this.condition)
		},
		reachBottom() {
			// 此tab为空数据
			// if(this.current != 2) {
			// 	this.loadStatus.splice(this.current,1,"loading")
			// 	setTimeout(() => {
			// 		this.getOrderList(this.current);
			// 	}, 1200);
			// }
		},
		// 页面数据
		// getOrderList(idx) {
		// 	for(let i = 0; i < 5; i++) {
		// 		let index = this.$u.random(0, this.dataList.length - 1);
		// 		let data = JSON.parse(JSON.stringify(this.dataList[index]));
		// 		data.id = this.$u.guid();
		// 		this.orderList[idx].push(data);
		// 	}
		// 	this.loadStatus.splice(this.current,1,"loadmore")
		// },
		// 总价
		// totalPrice(item) {
		// 	let price = 0;
		// 	item.map(val => {
		// 		price += parseFloat(val.price);
		// 	});
		// 	return price.toFixed(2);
		// },
		// 总件数
		// totalNum(item) {
		// 	let num = 0;
		// 	item.map(val => {
		// 		num += val.number;
		// 	});
		// 	return num;
		// },
		// tab栏切换
		change(index) {
			if (index!==this.swiperCurrent) {
				if (index===0) {
					this.condition.isUse = 0
				} else {
					this.condition.isUse = 2
				}
				this.swiperCurrent = index
				this.condition.current = 1
				this.getMyCouponList()
			}
			// this.swiperCurrent = index;
			// this.getOrderList(index);
		},
		changeStatus({ detail: { current } }){
			if (current!==this.swiperCurrent) {
				if (current===0) {
					this.condition.isUse = 0
				} else {
					this.condition.isUse = 2
				}
				this.condition.current = 1
				this.getMyCouponList()
			}
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		scrollLower(){
			console.log('滚动到底部了')
			if (this.memberCouponLoadingStatus==='loadmore'&&this.condition.current<this.memberCouponList.pages) {
				this.condition.current = this.condition.current + 1
				this.getMyCouponList(this.condition)
			}
		},
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f6f6f6;
}
/* #endif */
</style>

<style lang="scss" scoped>
// 自己的样式
.container {
	padding: 32rpx 24rpx 12rpx 24rpx;
	// margin-top: 32rpx;
}
	.coupon-title{
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}
	.coupon-item{
		overflow: hidden;
		margin-bottom: 16rpx;
	}
	.coupon-border {
		position: relative;
		overflow: hidden;
		margin-bottom: 16rpx;
		&::before {
			content: '';
			z-index: 1;
			position: absolute;
			right: 174rpx;
			top: 0;
			height: 20rpx;
			width: 20rpx;
			// border: 1px solid #FF4F39;
			border: 2rpx solid rgba(255,79,57,0.20);
			border-radius: 50%;
			background-color: #f6f6f6;
			margin-top: -10rpx;
			margin-right: -10rpx;
		}
		&::after {
			content: '';
			z-index: 1;
			position: absolute;
			right: 174rpx;
			bottom: 0;
			height: 20rpx;
			width: 20rpx;
			// border: 1px solid #FF4F39;
			border: 2rpx solid rgba(255,79,57,0.20);
			border-radius: 50%;
			background-color: #f6f6f6;
			margin-bottom: -10rpx;
			margin-right: -10rpx;
		}
	}
	.coupon-info{
		height: 174rpx;
		position: relative;
		border-radius: 8rpx;
		border: 2rpx solid rgba(255,79,57,0.20);
		// border: 2rpx solid #FF4F39;
		// height: 176rpx;
		background-color:#FFF7E9;
		display: flex;
		align-items: center;
		padding: 8rpx;
		.coupon-price{
			width: 200rpx;
			border-radius: 8rpx;
			text-align: center;
			background-color:#FF4F39;
			color: #fff;
			padding: 22rpx;
				.t1{
					font-size:28rpx;
				}
				.t2{
					font-size: 50rpx;
				}
			.t3{
				display: block;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
		.coupon-describe{
			flex: 1;
			margin-left: 16rpx;
			padding-left: 2rpx dashed #545412;
			border-top-right-radius:10rpx;
			border-bottom-right-radius:10rpx;
			.t1{
				color: #333333;
				font-size: 32rpx;
			}
			.t2{
				display: block;
				color: #666666;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
		}
		.coupon-employ{
			// border-left: 2rpx dashed #000;
			margin: auto;
			.t1{
				color: #FF4F39;
				position: absolute;
				right: 0;
				top: 0;
				// background-color: #FFA69B;
				background: rgba(255,166,155,0.20);
				padding: 2rpx 12rpx;
				font-size: 22rpx;
				// position: relative;
			}
			.t2{
				display: block;
				width: 146rpx;
				height: 64rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 64rpx;
				background-color: #FF4F39;
				margin-right: 16rpx;
				margin-left: auto;
				border-radius: 64rpx;
				color: #fff;
			}
			
		}
		&::after {
			content: '';
			position: absolute;
			right: 174rpx;
			top: 0;
			height: 100%;
			width: 2rpx;
			border-right: 2rpx dashed #FFA69B;
		}
	}


	.coupon-border-left {
		&::before {
			border: 1px solid #CCCCCC;
		}
		&::after {
			border: 1px solid #CCCCCC;
		}
		.coupon-info{
			background-color:#FFFFFF;
			border: 2rpx solid #CCCCCC;
			.coupon-employ{
				.t1{
					color: #999999;
				}
				.t2{
					color: #999999;
				}
			}
			.coupon-price{
				background-color: #CCCCCC;
			}
			.coupon-employ{
				.t1{
					background-color: #BFBFBF;
				}
				.t2{
				background-color: #CCCCCC;
				}
			}
			.coupon-employ{
				.t2{
					color: #FFF;
				}
			}
			&::after {
			border-right: 2rpx dashed #CCCCCC;
			}
		}
}


.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
